<template>
  <el-card class="box-card">
    <div
      slot="header"
      class="box-header"
    >
      <span
        class="header-subject"
        v-text="subject"
      />
        <router-link :to="anchor" class="more">更多</router-link>
    </div>
    <div
      v-for="(o, index) in data"
      :key="index"
      class="item"
    >
      <a class="content-box">
        <div class="meta-row">
          <ui class="item-list">
            <li class="item-time">{{ o.type }}</li>
            <li class="item-type">{{ o.publishedAt }}</li>
            <li class="item-who">{{ o.who }}</li>
          </ui>
        </div>
        <div class="info-row">
          <a
            :href="o.url"
            target="_blank"
            rel=""
            class="title"
          >
            {{ o.desc }}
          </a>
        </div>
      </a>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'TodayCard',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    subject: {
      type: String,
      default: '鬼知道是啥哟'
    },
    anchor: {
      type: String,
      default: ''
    }
  },
  data() {
    return {};
  },
  methods: {}
};
</script>
<style lang="less" scoped>
.box-card {
  height: 600px;
  overflow: auto;
  .box-header {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
      font-size: 1.1em;
    .more {
      text-decoration: none;
      font-weight: 600;
    }
  }
  
  .item {
    padding: 10px 2px 5px 2px;
    .content-box {
      .meta-row {
        font-size: 11px;
        color: #b3bac1;
        .item-list {
          list-style: none;
          display: flex;
          align-items: baseline;
          li {
            text-decoration: none;
            &:after {
            content: '·';
            color: rgb(178, 186, 194);
            margin: 0px 0.4em;
          }
          }
          
        }
      }
      .info-row {
        margin: .5rem 0 0.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        a {
          font-weight: 600;
          font-size: 1rem;
          text-decoration: none;
          cursor: pointer;
          color: #2e3135;
        }
      }
    }
  }
}
</style>
